<template>
  <!-- 歌单组件 -->
  <div class="card"
       @click="songCardClick">

    <div class="c-top">
      <img :src="SongCard.coverImg"
           alt="">
      <div class="c-bot">
        <i class="c-pre"></i>
        <span>{{ SongCard.playCount | playCountFilter}}</span>
        <i class="c-next"></i>
      </div>
    </div>

    <div class="c-text">
      <a href="#">
        <i class="u-icon u-icon-53"
           v-show="false"></i>
        {{SongCard.name}}
      </a>
      <slot name="author"></slot>
    </div>
  </div>
</template>

<script>
import { playList_all } from '@/assets/js/request'
import { mapMutations } from 'vuex'
export default {
  props: ['Song'],
  data() {
    return {
      SongCard: {
        id: this.Song.id,
        coverImg: this.Song.coverImgUrl || '',
        playCount: this.Song.playCount || 0,
        name: this.Song.name || '未知',
      },
    }
  },
  filters: {
    playCountFilter(param) {
      let count = Math.floor(param / 10000)
      if (count != 0) {
        return count + '万'
      } else {
        return param
      }
    },
  },
  methods: {
    ...mapMutations('song', [
      'songListAdd',
      'songListRemove',
      'songListChange',
    ]),
    songCardClick() {
      let params = {
        id: this.SongCard.id,
        limit: 20,
      }
      playList_all(params).then((res) => {
        let list = []
        res.songs.forEach((item) => {
          let { id, name, picUrl, dt, author } = {
            id: item.id,
            name: item.name,
            picUrl: item.al.picUrl,
            dt: item.dt,
            author: item.ar[0].name,
          }
          list.push({ id, name, picUrl, dt, author })
        })
        this.songListChange(list)
      })
    },
  },
}
</script>

<style lang="less" scoped>
@import '@/assets/css/base.less';
.card {
  width: 140px;
  cursor: pointer;
  .c-top {
    position: relative;
    width: 140px;
    img {
      width: 140px;
      height: 140px;
    }
    .c-bot {
      width: 140px;
      height: 27px;
      left: 0;
      bottom: 0;
      background: url(../assets/image/coverall.png) no-repeat;
      background-position: 0 -537px;
      position: absolute;
      text-align: left;
      .c-pre {
        background: url(../assets/image/iconall.png) no-repeat;
        background-position: 0 -24px;
        margin: 9px 5px 9px 10px;
        width: 14px;
        height: 11px;
        display: inline-block;
        vertical-align: middle;
      }
      span {
        color: #ccc;
        margin-top: 7px;
      }
      .c-next {
        background: url(../assets/image/iconall.png) no-repeat;
        background-position: 0 0;
        width: 16px;
        height: 17px;
        position: absolute;
        right: 10px;
        bottom: 5px;
        &:hover {
          background-position: 0 -60px;
        }
      }
    }
  }
  .c-text {
    width: 140px;
    font-size: 14px;
    line-height: 1.4;
    text-align: left;
    a {
      color: #000;
      .u-icon-53 {
        width: 35px;
        height: 15px;
        background-position: -31px -658px;
      }
      &:hover {
        text-decoration: underline;
      }
    }
  }
}
</style>